<template>
  <div :class="commentItem.parentId == 0 ? 'comment-item' : 'reply-item'">
    <div class="avatar">
      <img v-if="commentItem.avatar" :src="commentItem.avatar" alt />
      <!-- :style="randomRgb()" -->
      <!-- style="background:rgb(241,213,213)" -->
      <div v-else class="avatar-default" :style="randomRgb()">
        <span>{{ firstLetter }}</span>
      </div>
    </div>
    <div class="item-con clearfix">
      <div class="item-header clearfix list">
        <span class="author-name q-mr-sm text-black">
          {{ commentItem.author }}
          <span
            class="label-creator"
            v-show="
              commentItem.creatorId == authorId && commentItem.isSysUserCreated
            "
            >博主</span
          >
        </span>

        <span v-if="OSLabel" class="label"
          ><q-icon :name="OSLabel.icon" />{{ OSLabel.text }}</span
        >
        <span v-if="DeviceLabel" class="label"
          ><q-icon :name="DeviceLabel.icon" />{{ DeviceLabel.text }}</span
        >

        <!-- <span class="label">{{ commentItem.ip_location }}</span> -->

        <!-- 评论美化 -->
      </div>

      <div class="item-body">
        <span v-if="commentItem.quoteId > 0" class="atName"
          ><span>@</span>{{ commentItem.replyName }}</span
        >
        <span
          v-viewer
          class="my-pl-con marked highlight"
          ref="comment-content"
          v-html="renderedContent"
        ></span>
      </div>

      <div class="item-footer">
        <span class="item-footer-left ">{{
          commentItem.createdAt | timeAgo
        }}</span>
        <div class="item-footer-right ">
          <span
            href="javascript:;"
            class=" item-footer-rp"
            @click="showCommentPen('comment', commentItem.id, commentItem)"
            v-if="!penVisible('comment', commentItem.id)"
            >回复</span
          >
          <span
            href="javascript:;"
            class=" item-footer-rp"
            @click="hideCommentPen()"
            v-if="penVisible('comment', commentItem.id)"
            >取消</span
          >
          <span class="item-footer-line">|</span>
          <!-- :class="isLike ? 'liked' : ''" -->
          <q-btn
            flat
            class="favorite"
            round
            icon="favorite"
            @click="like"
            v-if="isLike"
            size="10px"
            color="red"
          />
          <q-btn
            v-else
            flat
            round
            icon="favorite"
            @click="like"
            style="color:rgb(158, 158, 158)"
          >
          </q-btn>
          <span> {{ commentItem.likes }}</span>
        </div>
      </div>
      <comment-pen v-show="penVisible('comment', commentItem.id)"></comment-pen>

      <li
        class="toggle-all"
        v-if="commentItem.sub && commentItem.sub.length > 0 && !expand"
        @click="ExpandReply()"
      >
        <span class="text">
          <div class="line"></div>
          <a>
            查看{{ item.sub.length }}条回复
            <q-icon name="mdi-chevron-down" />
          </a>
        </span>
      </li>
      <li
        class="toggle-all"
        @click="ExpandReply()"
        v-else-if="commentItem.sub && commentItem.sub.length > 0"
      >
        <span class="text">
          <div class="line"></div>
          <a>
            收起回复
            <q-icon name="mdi-chevron-up" />
          </a>
        </span>
      </li>
      <q-slide-transition :duration="300">
        <comment-list
          v-show="expand"
          :comments="commentItem.sub"
          :expand="expand"
        ></comment-list>
      </q-slide-transition>
    </div>
  </div>
  <!-- v-else-if="itemType == 'reply'" -->
</template>
<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator';
import { mixins } from 'vue-class-component';
import commentPen from './pen.vue';
import mixin from './mixin';
import { Comment } from 'src/models/comment';
import { Comment as CommentType } from 'src/models/comment';
import { Reply } from 'src/models/reply';
import emojiHelper from '../common/emoji/emojiHelper';
import { markdownToHTML } from 'src/transform/markdown';
@Component<commentItem>({
  components: {
    commentList: () => import('./list.vue'),
    commentPen
  }
})
export default class commentItem extends mixins(mixin) {
  //显示
  @Prop({ type: Object, required: true, default: null })
  item!: any;

  private expand: boolean = true;

  private color: string = '';

  get commentItem(): CommentType {
    return <CommentType>{ ...this.item };
  }

  get itemType(): string {
    if (this.item.parentId > 0) {
      return 'reply';
    } else {
      return 'comment';
    }
    throw '无效的评论项类型';
  }

  get authorId(): number {
    return 0;
  }

  get firstLetter(): string {
    if (this.commentItem.author) {
      return this.commentItem.author[0].toUpperCase();
    }
    return '';
  }

  getParentId(comment: Comment): number {
    if (comment.parentId > 0) {
      return comment.parentId;
    } else return comment.id;
  }

  randomRgb() {
    let R = Math.floor(Math.random() * 255);
    let G = Math.floor(Math.random() * 255);
    let B = Math.floor(Math.random() * 255);
    var res = `background:rgb(${R},${G},${B})`;

    return res;
  }

  //展开回复
  ExpandReply() {
    // comment.ExpandAll =!comment.ExpandAll;

    //   this.$store.commit("comment/SetCommentExpand",comment);

    this.expand = !this.expand;
  }

  get renderedContent() {
    let value = emojiHelper.emoji(this.commentItem.content);
    value = markdownToHTML(value);
    this.$nextTick(() => {
      this.$prism.highlightAll();
    });

    return value;
  }

  get OS(): string {
    if (
      this.commentItem.equipment &&
      this.commentItem.equipment.indexOf('-') > -1
    ) {
      const tempArray = this.commentItem.equipment.split('-');
      return tempArray[0];
    } else {
      return '';
    }
  }

  get Device(): string {
    if (
      this.commentItem.equipment &&
      this.commentItem.equipment.indexOf('-') > -1
    ) {
      const tempArray = this.commentItem.equipment.split('-');
      return tempArray[1];
    } else {
      return '';
    }
  }
  get OSLabel(): any {
    if (this.OS.toUpperCase().indexOf('WINDOWS') > -1)
      return { icon: 'mdi-microsoft-windows', text: 'Windows' };
    else return undefined;
  }

  get DeviceLabel(): any {
    if (this.Device.toUpperCase().indexOf('CHROME') > -1)
      return { icon: 'mdi-google-chrome', text: 'Chrome' };
    else return undefined;
  }

  get isLike(): boolean {
    const likeHistory = [...this.$store.state.comment.likeHistory];
    if (likeHistory) return likeHistory.includes(this.commentItem.id);
    return false;
  }

  public async like() {
    if (this.isLike) {
      this.$q.notify({
        type: 'positive',
        message: `点过了就别取消了`,
        position: 'bottom'
      });
      return;
    }
    const res = await this.$store.dispatch('comment/Like', this.commentItem.id);
    if (res) {
      this.commentItem.likes = res;
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'src/css/markdown.scss';
/*----------评论区域 begin----------*/
.comment-item,
.reply-item {
  margin-top: 20px;
  width: 100%;
  border-bottom: 2px solid #ededed;
  display: flex;
  ::v-deep .emoji-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
  }
  &:last-child {
    border-bottom: none;
  }

  .avatar {
    overflow: hidden;
    margin-top: 10px;
    min-width: 50px;
    > img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      transition: 0.5s;
    }
    > .avatar-default {
      // background: black;
      height: 50px;
      border-radius: 50%;
      width: 50px;
      color: white;
      position: relative;
      span {
        font-size: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    &:hover {
      transform: rotate(360deg);
    }
  }

  .fa:before {
    margin-left: 2px;
  }

  .item-con {
    margin-bottom: 10px;
    flex-basis: 100%;
    padding: 0px 10px;
    overflow: auto;

    .atName {
      font-size: 12px;
      color: #ec7259;
    }

    .label-creator {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-left: 4px;
      padding: 0 2px;
      font-size: 12px;
      font-weight: normal;
      color: #ec7259;
      border: 1px solid #ec7259;
      border-radius: 4px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    .item-header {
      width: 100%;
      margin-top: 7px;
      word-wrap: break-word;
      overflow: hidden;

      .author-name {
        font-size: 12px;
        display: block;
        display: inline-block;
        font-weight: 700;
        margin-bottom: 5px;
      }
      .label {
        display: inline;
        font-size: 0.75rem;
        margin-right: 5px;
        color: grey;
        text-align: center;
        white-space: nowrap;
        line-height: 1;
        vertical-align: baseline;
      }
    }
    .item-body {
      font-size: 12px;
      color: var(--text-color);
    }
    .item-footer {
      padding-top: 6px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .item-footer-left {
        font-size: 12px;
        color: #8b8b8b;
        display: block;
      }
      .item-footer-right {
        display: block;
        position: relative;
        overflow: hidden;
        > span {
          display: inline-block;
          font-size: 12px;
        }
        .item-footer-rp {
          cursor: pointer;
        }
        .item-footer-line,
        .item-footer-like {
          font-size: 12px;
          color: var(--text-light);
          &.liked {
            i {
              color: rgba(255, 0, 0, 0.6);
            }
          }

          i {
            cursor: pointer;
            color: lightgray;
            font-size: 15px;

            &:hover {
              color: rgba(255, 0, 0, 0.6);
              transform: scale(1.5);
            }
          }
        }

        @media screen and (max-width: 750px) {
          .icon-thumbs-on {
            &:hover {
              transform: none;
              color: var(--text-color);
            }
            &.default {
              color: var(--text-color);
            }
            &.praised {
              color: red;
            }
          }
        }
      }
    }

    .item-footer-line {
      display: block;
      padding: 0 10px;
    }

    .like-num {
      font-style: normal;
    }
  }

  //展开收起回复
  li.toggle-all {
    display: block;
    width: 100%;
    position: relative;
    padding-left: 10px;
    font-weight: bold;
    cursor: pointer;
    span {
      &:first-child {
        font-size: 12px;
        font-weight: 300;
      }
      > a {
        color: var(--text-color);
      }

      > span > .line {
        width: 20px;
        border-bottom: 1px solid lightgray;
        position: absolute;
        top: 60%;
        > a {
          margin-left: 25px;
        }
      }
    }
  }
}

@media screen and (max-width: 600px) {
  .comment-item,
  .reply-item {
    margin-top: 1px;
    width: 100%;
    border-bottom: 2px solid #ededed;
    display: flex;

    .avatar {
      overflow: hidden;
      margin-top: 10px;
      min-width: 40px;
      > img {
        width: 40px;
        height: 40px;
      }
      > .avatar-default {
        // background: black;
        height: 50px;
        border-radius: 50%;
        width: 50px;
        color: white;
        position: relative;
        span {
          font-size: 20px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
      &:hover {
        transform: rotate(360deg);
      }
    }

    .fa:before {
      margin-left: 2px;
    }

    .item-con {
      margin-bottom: 10px;
      flex-basis: 100%;
      padding: 0px 10px;
      overflow: auto;

      .label-creator {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 4px;
        padding: 0 2px;
        font-size: 12px;
        font-weight: normal;
        color: #ec7259;
        border: 1px solid #ec7259;
        border-radius: 4px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      .item-header {
        width: 100%;
        margin-top: 7px;
        word-wrap: break-word;
        overflow: hidden;

        .author-name {
          font-size: 12px;
          display: block;
          display: inline-block;
          font-weight: 700;
          margin-bottom: 5px;
        }
        .label {
          display: inline;
          font-size: 0.75rem;
          margin-right: 5px;
          color: grey;
          text-align: center;
          white-space: nowrap;
          line-height: 1;
          vertical-align: baseline;
        }
      }
      .item-body {
        font-size: 12px;
        color: var(--text-color);
      }
      .item-footer {
        padding-top: 6px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .item-footer-left {
          font-size: 12px;
          color: #8b8b8b;
          display: block;
        }
        .item-footer-right {
          display: block;
          position: relative;
          overflow: hidden;
          > span {
            display: inline-block;
            font-size: 12px;
          }
          .item-footer-rp {
            cursor: pointer;
          }
          .item-footer-line,
          .item-footer-like {
            font-size: 12px;
            color: var(--text-light);
            &.liked {
              i {
                color: rgba(255, 0, 0, 0.6);
              }
            }

            i {
              cursor: pointer;
              color: lightgray;
              font-size: 15px;

              &:hover {
                color: rgba(255, 0, 0, 0.6);
                transform: scale(1.5);
              }
            }
          }

          @media screen and (max-width: 750px) {
            .icon-thumbs-on {
              &:hover {
                transform: none;
                color: var(--text-color);
              }
              &.default {
                color: var(--text-color);
              }
              &.praised {
                color: red;
              }
            }
          }
        }
      }

      .item-footer-line {
        display: block;
        padding: 0 10px;
      }

      .like-num {
        font-style: normal;
      }
    }

    //展开收起回复
    li.toggle-all {
      display: block;
      width: 100%;
      position: relative;
      padding-left: 10px;
      font-weight: bold;
      cursor: pointer;
      span {
        &:first-child {
          font-size: 12px;
          font-weight: 300;
        }
        > a {
          color: var(--text-color);
        }

        > span > .line {
          width: 20px;
          border-bottom: 1px solid lightgray;
          position: absolute;
          top: 60%;
          > a {
            margin-left: 25px;
          }
        }
      }
    }
  }
}
</style>
